    window.onload = function() {
        // canvas设置宽高
        window.addEventListener("myCanvas", resizeCanvas, false);

        function resizeCanvas() {
            w = canvas.width = document.body.clientWidth;
            h = canvas.height = document.body.clientHeight;
            console.log(h)
        }
    }


$(function(){
     var canvas = document.getElementById('myCanvas'); //获取canvas元素
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
      //创建画布
    var canvas = oCanvas.create({
        canvas: "#myCanvas"
    });


    // 绘制开始
    var dx = canvas.width / 2; //中心点横坐标
    var dy = canvas.height / 2; //中心点纵坐标
    var r = 100; //半径
    var x = Math.sin(0);
    var y = Math.cos(0);
    var num = $('#box .guest').length;
    var dig = Math.PI * 2 / num; //角度,整个圆分为9份
    for (var i = 0; i < num; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        var endX = dx + x * (r + 100); //绘制终点x坐标
        var endY = dy + y * (r + 100); //绘制终点y轴坐标

        //绘制发散线条
        var line = canvas.display.line({
            start: {
                x: dx + x *r ,
                y: dy + y * r
            },
            end: {
                x: endX,
                y: endY
            },
            stroke: "0.5px #fff",
            currentPosition: "line-position"

        });
        canvas.addChild(line);


        // 第二圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈

//         // 第二圈中间线条
//         var centerLinee = canvas.display.line({
//             start: {
//                 x: endX,
//                 y: endY
//             },
//             end: {
//                 x: dx + x * (r + 400),
//                 y: dy + y * (r + 400)
//             },
//             stroke: "0.5px #fff",
//             currentPosition: "line-position"
//         });
//         canvas.addChild(centerLinee);
//         //第二圈中间圆圈
//         // var roundCirclee = canvas.display.arc({
//         //     x: dx + x * (r + 180 + 35),
//         //     y: dy + y * (r + 180 + 35),
//         //     radius: 35,
//         //     start: 0,
//         //     end: 360,
//         //     stroke: "1px #fff",
//         //     currentPosition: "round-position"
//         // });
//         // canvas.addChild(roundCirclee);

//         //第二圈中间线条绘制文字
//         var centerTextt = canvas.display.text({
//             x: dx + x * (r + 350),
//             y: dy + y * (r + 350),
//             origin: {
//                 x: "left",
//                 y: "center"
//             },
//             font: "bold 12px sans-serif",
//             text: "关系",
//             fill: "#fff"
//         });
// //        canvas.addChild(centerTextt);
        // 参数声明
        var a = dx + x * (r + 180 + 35); //中心点横坐标
        var b = dy + y * (r + 180 + 35); //中心点纵坐标

        var rr = 500; //半径
        var digg = Math.PI * 2 / num; //角度,整个圆分为3份


        for (var ii = 0; ii < num; ii++) {
            var xx = Math.sin(ii * digg);
            var yy = Math.cos(ii * digg);
            var endXX = a + xx * (rr); //绘制终点x坐标
            var endYY = b + yy * (rr); //绘制终点y轴坐标

            //第二圈右边线
            // var rightLinee = canvas.display.line({
            //     start: {
            //         x: dx + Math.sin((ii-1 )* digg) * (r + 180 + 35),
            //         y: dy + Math.cos((ii -1)* digg) * (r + 180 + 35)
            //     },
            //     end: {
            //          x: dx + Math.sin((ii + 0.3-1) * (Math.PI * 2 / 9)) * rr,
            //         y: dy + Math.cos((ii + 0.3-1) * (Math.PI * 2 / 9)) * rr
            //     },
            //     stroke: "0.1px yellow",
            //     currentPosition: "linee-position"
            // });
            // canvas.addChild(rightLinee);

//             //第二圈右边圆圈
// //             var rightCirclee = canvas.display.arc({
// //                 x: dx + x * (r + 180 + 35),
// //                 y: dy + y * (r + 180 + 35),
// // //                x: dx + Math.sin((ii + 0.3) * (Math.PI * 2 / 9)) * (rr + 35),
// // //                y: dy + Math.cos((ii + 0.3) * (Math.PI * 2 / 9)) * (rr + 35),
// //                 radius: 35,
// //                 start: 0,
// //                 end: 360,
// //                 stroke: "0.5px yellow",
// //                 currentPosition: "round-position"
// //             });
// //             canvas.addChild(rightCirclee);
  

//             //第二圈右边线条绘制文字
//             var rightTextt = canvas.display.text({
//                 x: dx + Math.sin((ii + 0.3) * (Math.PI * 2 / 9)) * (rr - 60),
//                 y: dy + Math.cos((ii + 0.3) * (Math.PI * 2 / 9)) * (rr - 60),
//                 origin: {
//                     x: "center",
//                     y: "center"
//                 },
//                 font: "bold 12px sans-serif",
//                 text: "关系",
//                 fill: "#fff"
//             });
// //            canvas.addChild(rightTextt);



//             //第二圈左边线
            // var leftLinee = canvas.display.line({
            //     start: {
            //         x: dx + Math.sin((ii-1 )* digg) * (r + 190 ),
            //         y: dy + Math.cos((ii -1)* digg) * (r + 190)
            //     },
            //     end: {
            //        x: dx + Math.sin((ii - 0.2-1) * (Math.PI * 2 / 9)) * rr,
            //        y: dy + Math.cos((ii - 0.2-1) * (Math.PI * 2 / 9)) * rr
            //         // x: dx + Math.sin((ii-1 )* digg) * (r + 180 + 35),
            //         // y: dy + Math.cos((ii -1)* digg) * (r + 180 + 35)
            //     },
            //     stroke: "0.1px red",
            //     currentPosition: "linee-position"
            // });
            // canvas.addChild(leftLinee);
    }
}

});


